import { useState } from 'react'
import { HashRouter, Route, Routes, Link, useNavigate, Navigate } from "react-router-dom";
// import reactLogo from './assets/react.svg'
// import viteLogo from '/vite.svg'
import Login from "./pages/login";
import Home from "./pages/home";
import User from "./pages/user";
import OutletDemo from "./pages/outlet";
import './App.scss'

function App() {
  // const [count, setCount] = useState(0)
  const navigate = useNavigate();

  return (
      <div className='App'>
        {/* 指定跳转的组件, to 用来配置路由地址 */}
        <Link to="/">首页</Link><br/>
        <Link to="/user">用户</Link><br/>
        <Link to="/outlet">嵌套路由</Link><br/>
        <Link to="/outlet/user">用户2</Link><br/>
        <Link to="/home">默认子路由</Link><br/>
        <button onClick= {()=> navigate("/login")}>登录</button>
        {/* 路由出口: 路由对应的组件会在这里渲染 */}
        <Routes>
          {/* 指定路由路径和组件的对应关系: path 代表路径,element 代表对应的组件 */}
          <Route path = "/" element={<Navigate to= "login"/>}> </Route>
          <Route path = "/user" element={<User />}> </Route>
          <Route path = "/login" element={<Login />}> </Route>

          {/* 嵌套路由 */}
          <Route path = "/outlet" element={<OutletDemo />}> 
            <Route path = "user" element={<User />}> </Route>
            <Route path = "login" element={<Login />}> </Route>
          </Route>

          {/* 默认子级路由,在路由上添加 index 属性 */}
          <Route path = "/home" element={<Home />}>
            <Route index element={<Login />}></Route>
            <Route path="user" element= {<User />}></Route>
          </Route>
        </Routes>
      </div>
  )
}

export default App
